<template>
<el-card class="card_box">
    <custom-form :list="formList" :gutter="60" ></custom-form>
    <el-row>
        <el-col :span="24" style="text-align: right;">
            <!-- <el-button @click="downloadInfo(postData)"  :loading-icon="Eleme" :icon="Download" class="refresh-button" :loading="buttonLoading">导出</el-button> -->
            <el-button @click="search" :icon="Search" type="primary">查询</el-button>
            <el-button @click="reload" type="info" :icon="RefreshRight" plain> 重置</el-button>
             
        </el-col>
    </el-row>
</el-card>
<el-card>
    <el-table :data="list" border :header-cell-style="tableHeader" v-loading="loadingTable">
        <el-table-column type="index" label="序号" align="center" width="88"></el-table-column>
        <el-table-column v-for="item in columns" :key="item.dataKey" :property="item.dataKey" :label="item.title" align="center"></el-table-column>
    </el-table>
    <div class="padding-top-14">
        <el-pagination v-model:current-page="postData.page"
            :total="totalNum"
            v-model:page-size="postData.size"
         :pager-count="7"
         :page-sizes="[5,10, 20]"
         layout="->, total, prev, pager, next,sizes"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         background>
         </el-pagination>
   </div>
</el-card>
</template>
<script setup lang="ts">
import "@/style/modules/users.scss";
import customForm from "@/views/users/components/customForm/index.vue";
import { useRoute } from 'vue-router';
import type {CusForm,Column} from '@/utils/users/pubConfig';
import { RefreshRight, Search} from '@element-plus/icons-vue';
import {businessSecondaryAccountPaht} from "@/config/paths"
import {tableHeader} from '@/utils/users/pubConfig';
const route =useRoute()
const formList=ref<CusForm[]>(
    [
        {title:'姓名',sm:8,md:8,lg:8,xl:8,showInput:true,inputName:'',value:'user_name',inputPlaceholder:'请输入姓名'},
        { title:'手机号',sm:8,md:8,lg:8,xl:8,showInput:true,inputName:'',value:'user_phone',inputPlaceholder:'请输入手机号'},
        { title:'企业名称',sm:8,md:8,lg:8,xl:8,showInput:true,inputName:'',value:'business_name',inputPlaceholder:'请输入用企业名称'}]
)
const columns=ref<Column>([
    {
        key:'business_name',
        title:'企业名称',
        dataKey:'business_name'
    },
   
    {
        key:'leave_days',
        title:'剩余资源',
        dataKey:'leave_days'
    },
    {
        key:'user_id',
        title:'ID编号',
        dataKey:'user_id'
    },
    {
        key:'user_name',
        title:'姓名',
        dataKey:'user_name'
    },
    {
        key:'user_phone',
        title:'电话',
        dataKey:'user_phone'
    },
])
interface Account{
    business_name:string,
    business_id:string ,
    leave_days:number,
    user_id:string,
    user_name:string,
    user_phone:string
}
const list=ref<Account[]>([{
    business_name:'',
    business_id:'' ,
    leave_days:0,
    user_id:'',
    user_name:'',
    user_phone:''
}])
const totalNum=ref<number>(0)
const loadingTable=ref<boolean>(false)
interface PostData{
    page:number,
    size:number,
    business_id:string
}
const postData=ref<PostData>({
    page:1,
    size:10,
    business_id:''
})

onMounted(async()=>{
    const {business_id}=route.query
    postData.value.business_id=business_id
    list.value=[]
    const {total,secondary_account_infos}=await getList()
    list.value=secondary_account_infos
    totalNum.value=total
})
async function getList(){
loadingTable.value=true
 const {data}=await baseRequest.post(businessSecondaryAccountPaht.value,postData.value)
 loadingTable.value=false
 return data
}
function reload(){
    location.reload()
}
async function search(){
    postData.value.page=1
    formList.value.forEach(item=>{
        if(item.inputName){
            postData.value[item.value]=item.inputName
        }else{
            delete(postData.value[item.value])
        }
    })
    list.value=[]
    totalNum.value=0
    const {total,secondary_account_infos}=await getList()
    list.value=secondary_account_infos
    totalNum.value=total
}
async function handleSizeChange(val:number){
      postData.value.size=val
      postData.value.page=1
      const {secondary_account_infos}=await  getList()
      list.value=secondary_account_infos
   }
   async function handleCurrentChange(val:number) {
      postData.value.page=val
      const {secondary_account_infos}=await  getList()
      list.value=secondary_account_infos
   }
</script>